<!DOCTYPE html>
<html lang="en">
<head th:replace="/admin/_backend-fragments :: backend-head-template"><title></title></head>
<body>


<!-- 导航 nav -->
<nav th:replace="/admin/_backend-fragments :: backend-nav-menu-template"></nav>
<div th:replace="/admin/_backend-fragments :: backend-nav-secondary-menu-template(1)"></div>

<!--中间内容 div-->
<div class="ui custom-padded-tb-large basic segment">
  <div class="ui container">

    <form action="#" method="post" class="ui form">
      <div class="inline stackable fields">

        <!--
          文章标题输入框
         -->
        <div class="field">
            <input type="text" name="title" placeholder="文章标题">
        </div>

        <!--
          分类单选框
          特性：
          1. 自动下来
         -->
        <div class="field">
          <div class="ui selection search dropdown">
            <input type="hidden" name="type">
            <i class="dropdown icon"></i>
            <div class="default text">分类</div>
            <div class="menu">
              <div class="item" data-value="0">分类1</div>
              <div class="item" data-value="1">分类2</div>
              <div class="item" data-value="2">分类3</div>
            </div>
          </div>
        </div>

        <!--
          标签多选框
          特性：
          1. 自动下拉
          2. 可以进行搜索
        -->
        <div class="field">
          <div class="ui fluid multiple search selection dropdown">
            <input type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">标签</div>
            <div class="menu">
              <div class="item" data-value="1">Java</div>
              <div class="item" data-value="2">Python</div>
              <div class="item" data-value="3">CPP</div>
            </div>
          </div>
        </div>

        <!--
          草稿勾选选项
         -->
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="draft" name="draft">
            <label for="draft">
              草稿
            </label>
          </div>
        </div>


        <div class="ui blue button">
          搜索
        </div>
      </div>
    </form>

    <table class="ui stackable selectable celled table">
      <thead>
        <tr>
          <th><i class="ui leaf icon"></i> 编号</th>
          <th><i class="ui book icon"></i> 标题</th>
          <th><i class="ui time icon"></i> 发布日期</th>
          <th><i class="ui folder open icon"></i> 分类</th>
          <th><i class="ui tags icon"></i> 标签</th>
          <th><i class="ui comments icon"></i> 评论</th>
          <th><i class="ui wrench icon"></i> 操作</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <h3 class="ui header">
              <div class="content">
                1
              </div>
            </h3>
          </td>

          <td>
            <h3 class="ui header">
              <div class="content">
                文章标题123
              </div>
            </h3>
          </td>

          <td>
          <h3 class="ui header">
            <div class="content">
              2021-07-08
            </div>
          </h3>
        </td>

          <td>
          <h3 class="ui header">
            <a href="#" class="ui small red label">
              后端
            </a>
          </h3>
        </td>

          <td>
            <a href="#" class="ui small teal left pointing label">
              Java
            </a>
        </td>
          <td>
          <h3 class="ui header">
            <a href="#" class="content">
              17
            </a>
          </h3>
        </td>
          <td>
            <a href="#" class="ui blue button">修改</a>
            <a href="#" class="ui red button">删除</a>
        </td>
        </tr>
      </tbody>

      <tbody>
      <tr>
        <td>
          <h3 class="ui header">
            <div class="content">
              1
            </div>
          </h3>
        </td>

        <td>
          <h3 class="ui header">
            <div class="content">
              文章标题123
            </div>
          </h3>
        </td>

        <td>
          <h3 class="ui header">
            <div class="content">
              2021-07-08
            </div>
          </h3>
        </td>

        <td>
          <h3 class="ui header">
            <a href="#" class="ui small red label">
              后端
            </a>
          </h3>
        </td>

        <td>
          <a href="#" class="ui small teal left pointing label">
            Java
          </a>
        </td>
        <td>
          <h3 class="ui header">
            <a href="#" class="content">
              17
            </a>
          </h3>
        </td>
        <td>
          <a href="#" class="ui blue button">修改</a>
          <a href="#" class="ui red button">删除</a>
        </td>
      </tr>
      </tbody>

      <tbody>
      <tr>
        <td>
          <h3 class="ui header">
            <div class="content">
              1
            </div>
          </h3>
        </td>

        <td>
          <h3 class="ui header">
            <div class="content">
              文章标题123
            </div>
          </h3>
        </td>

        <td>
          <h3 class="ui header">
            <div class="content">
              2021-07-08
            </div>
          </h3>
        </td>

        <td>
          <h3 class="ui header">
            <a href="#" class="ui small red label">
              后端
            </a>
          </h3>
        </td>

        <td>
          <a href="#" class="ui small teal left pointing label">
            Java
          </a>
        </td>
        <td>
          <h3 class="ui header">
            <a href="#" class="content">
              17
            </a>
          </h3>
        </td>
        <td>
          <a href="#" class="ui blue button">修改</a>
          <a href="#" class="ui red button">删除</a>
        </td>
      </tr>
      </tbody>

      <tfoot>
        <tr>
          <th colspan="7">
            <div class="ui right floated pagination menu">
              <a href="#" class="icon item">
                <i class="left chevron icon"></i>
              </a>
                <a href="#" class="item">1</a>
                <a href="#" class="item">2</a>
                <a href="#" class="item">3</a>

              <a href="#" class="icon item">
                <i class="right chevron icon"></i>
              </a>
            </div>
          </th>
        </tr>
      </tfoot>

    </table>

  </div>
</div>

<!--
  底部元素 footer
-->

<!--
  JQuery
-->
<script>
  $('.menu.toggle').on('click', function (){
    $('.click-to-show-nav-menu-list').toggleClass('custom-mobile-hide-menu');
  });

  $('.ui.dropdown').dropdown({
    on: 'hover'
  });

</script>

</body>
</html>